.slider {position:relative; width:100%; overflow:hidden;}
.slides {height:100%; overflow:hidden; -webkit-backface-visibility:hidden; -webkit-transform-style:preserve-3d; -webkit-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000); -moz-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000); -ms-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000); -o-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000); transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);}
.slide {height:100%; float:left; clear:none;}
.slider-arrows {}
.slider-arrow {position:absolute; display:block; width:50px; height:50px; line-height:50px; text-decoration:none; text-align:center; color:#fff; top:50%; margin-top:-25px; font-size:2em; background-color:#333; background-color:rgba(50,50,50,0.3); border-radius:50%; font-family:serif; opacity:0; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
.slider:hover .slider-arrow {opacity:1;}
a.slider-arrow, a.slider-arrow:hover {color:#fff;}
a.slider-arrow:hover {background-color:rgba(50,50,50,0.5);}
.slider-arrow--right {right:30px;}
.slider-arrow--left {left:30px;}
.slider-nav {position:absolute; bottom:6%;}
.slider-nav__item {width:10px; height:10px; float:left; clear:none; display:block; margin:0 5px; background:#ccc; border-radius:50%;}
.slider-nav__item:hover {background:#0784da;}
.slider-nav__item--current {background:#0784da;}
.slide .box img {width:100%; height:auto;}